<template>
<v-container>
  <v-navigation-drawer
      v-model="filter"
      fixed
      right
      temporary
  >
    <!--  筛选-->
  <v-list>
    <v-list-item  v-for="(filter,i) in filterList"
                  :key="i"
                  :label="filter.key.attributeValue">
      <v-list-item-content class="pl-2">
        <v-list-item-title>{{filter.key.attributeValue}}</v-list-item-title>
        <v-radio-group v-model="filter.key.selectedValue">
          <v-radio
              v-for="(value,i) in filter.value"
              :key="i"
              :label="value.attributeValue"
              :value="value.attributeValue"
          ></v-radio>
        </v-radio-group>
        <v-divider/>
      </v-list-item-content>
    </v-list-item>
    <v-list-item>
      <v-row>
        <v-col cols="6">
          <v-text-field
              dense
              label="价格"
              placeholder="0"
              outlined
              type="number"
              v-model="minPrice"
          ></v-text-field>
        </v-col>
        <v-col cols="6">
          <v-text-field
              dense
              label="价格"
              placeholder="9999999"
              outlined
              type="number"
              v-model="maxPrice"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-list-item>
    <v-list-item>
        <v-btn>取消</v-btn>
        <v-btn @click="filterHandle">筛选</v-btn>
    </v-list-item>
  </v-list>
  </v-navigation-drawer>
  <v-divider/>
  <v-row no-gutters>
    <v-col>
      <v-btn-toggle
          v-model="text"
          tile
          color="deep-purple accent-3"
          group
      >
        <v-btn value="手机">
          手机
        </v-btn>

        <v-btn value="耳机">
          耳机
        </v-btn>

        <v-btn value="充电器">
          充电器
        </v-btn>

        <v-btn value="手机壳">
          手机壳
        </v-btn>
        <v-btn value="<--相似推荐，该功能暂未实现">
          <--相似推荐，该功能暂未实现
        </v-btn>
      </v-btn-toggle>
    </v-col>
    <v-col cols="1" class="pt-2"><v-btn @click="filter=true">筛选</v-btn></v-col>
  </v-row>
  <v-divider/>
  <v-row>
    <v-col cols="3" v-for="goods in goodsList" :key="goods.goodsId">
      <v-hover v-slot="{ hover }">
        <v-card
            class="mx-auto"
            color="grey lighten-4"
            max-width="600"
            min-height="425"
            @click="jumpHandle({
              path:'goodsShow',
              query:{
                goodsId:goods.goodsId
              }
            })"
        >
          <v-card-text>
            <v-img
                contain
                width="260"
                src="../../assets/goods.webp"
            ></v-img>
          </v-card-text>
          <v-card-text
              class="pt-0"
              style="position: relative;"
          >
            <p class="red--text subtitle-1 float-start">￥{{goods.exhibitPrice}}</p>
            <p class=" subtitle-1 float-end">{{goods.salesSum}}&nbsp;人购买</p>
            <p class="font-weight-light grey--text subtitle-1 mb-2 name_p" style="width: 100%">
              {{goods.goodsName}}
            </p>
            <h6 class="font-weight-light black--text mb-2">
              {{goods.suppliersId}}
            </h6>
          </v-card-text>
        </v-card>
      </v-hover>
    </v-col>
  </v-row>
  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination
                v-model="pageIndex"
                class="my-4"
                :length="pageTotal"
            ></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </div>
</v-container>
</template>

<script>
import {request} from "@/network/request";

export default {
  name: "GoodsList",
  data:()=>({
    filter:false,
    pageIndex:1,
    pageSize:30,
    pageTotal:1,
    goodsList:[],
    filterList:[],
    minPrice:0.0,
    maxPrice:9999999.0,
  }),
  created() {
    this.queryHandle()
  },
  methods:{
    jumpHandle(path){
      this.$router.push(path)
    },
    queryHandle(){
      let source = this.$route.query
      if (source.goodsCategoryId!==undefined){
        // alert("a"+source.goodsCategoryId)
        this.getDataByGoodsCategoryId(source.goodsCategoryId)
      }else if (source.searchStr!==undefined){
        // alert("b"+source.searchStr)
        this.getDataBySearchStr(source.searchStr);
      }else {
        // alert("c")
        this.getDataByNull()
      }
    },
    getDataByGoodsCategoryId(goodsCategoryId){
      request({
        url:'/api/goods/listByGoodsCategoryId',
        method: 'GET',
        params:{
          goodsCategoryId,
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
        }
      })
      .then(resp=>{
        this.pageTotal=resp.data.data.totalPage
        this.goodsList=resp.data.data.goodsList
        let temp=resp.data.data.filter
        temp.forEach(item=>{
          item.key.selectedValue=null
        })
        this.filterList=temp
      })
      .catch(err=>{})
    },
    getDataBySearchStr(searchStr){
      request({
        url:'/api/goods/listBySearchStr',
        method: 'GET',
        params:{
          searchStr,
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
        }
      })
          .then(resp=>{
            this.pageTotal=resp.data.data.totalPage
            this.goodsList=resp.data.data.goodsList
            let temp=resp.data.data.filter
            temp.forEach(item=>{
              item.key.selectedValue=null
            })
            this.filterList=temp
          })
          .catch(err=>{})
    },
    getDataByNull(){
      request({
        url:'/api/goods/list',
        method: 'GET',
        params:{
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
        }
      })
          .then(resp=>{
            this.pageTotal=resp.data.data.totalPage
            this.goodsList=resp.data.data.goodsList
            let temp=resp.data.data.filter
            temp.forEach(item=>{
              item.key.selectedValue=null
            })
            this.filterList=temp
          })
          .catch(err=>{})
    },
    filterHandle(){
      console.log(this.filterList)

      let obj= Object.create(null);

      this.filterList.forEach(filter=>{
        if (filter.key.selectedValue!=null){
          obj[filter.key.attributeValue]=filter.key.selectedValue
        }
      })
      request({
        url:'/api/goods/goodsSpecs/listGoodsByFilter',
        method: 'GET',
        params:{
          goodsSpecs:JSON.stringify(obj),
          pageIndex:this.pageIndex,
          pageSize:this.pageSize,
          minPrice:this.minPrice,
          maxPrice:this.maxPrice
        }
      })
      .then( resp=>{
        this.pageTotal=resp.data.data.totalPage
        this.goodsList=resp.data.data.goodsList
      })
      .catch(err=>{})
    }

  }
}
</script>

<style scoped>
.name_p{
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
</style>
